<template>
  <transition name="fade-transform">
    <iframe v-if="src" :src="src" frameborder="0" class="iframe-box"></iframe>
    <div v-else>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'BlankLayout',
  data () {
    return {}
  },
  computed: {
    meta () {
      return this.$route.meta
    },
    src () {
      const { isOutside, target, component } = this.$route.meta
      if (isOutside && !target) {
        return component
      }
      return ''
    }
  },
  created () {
    window.addEventListener('message', this.listenMessage, false)
  },
  destroyed () {
    window.removeEventListener('message', this.listenMessage, false)
  },
  methods: {
    ...mapActions(['Logout', 'GetInfo']),
    // 子窗口传递信息
    listenMessage ({ data }) {
      if (data.code === 3) { // 更新用户信息
        this.GetInfo()
      } else if (data.code === 4) { // 退出登录
        this.logout()
      }
    },
    logout () {
      this.Logout({ isReqLogOut: true }).then(res => {
        console.log('退出成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .iframe-box {
    width: 100%;
    min-height: 80vh;
    // margin: 24px;
    border: none;
    background-color: #fff;
  }

  /* fade-transform */
  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: all .5s;
  }

  .fade-transform-enter {
    transform: translateX(-50px);
  }

  .fade-transform-leave-to {
    display: none;
    transform: translateX(50px);
  }
</style>
